<!DOCTYPE html>
<!-- Tutorial series by David Rousset: http://blogs.msdn.com/davrous -->
<!-- Based on this EaselJS sample: http://easeljs.com/examples/bitmapAnimation.html -->
<html>
	<head>
		<title>simplePlatformerBox2DWeb</title>

		<!-- Import EaselJS Framework -->
		<script src="js/jquery-2.1.1.min.js"></script>
		<script src="js/easeljs-0.6.0.min.js"></script>
        <script src="js/gamefwk/Color.js"></script>
		<script src="js/gamefwk/util/ImgLoader.js"></script>
		<script src="js/gamefwk/Vector2.js"></script>
		<script src="js/gamefwk/Framework.js"></script>
		<script src="js/gamefwk/Rectangle.js"></script>
        <script src="js/gamefwk/go/GameObject.js"></script>
		<script src="js/gamefwk/go/char/Mario.js"></script>
		<script src="js/gamefwk/go/char/Brick.js"></script>

		<script>
            GameSys = {};

            var canvas;
            var screen_width;
            var screen_height;

            GameSys.fps = 60;
            GameSys.imagesToLoad = 2;

            GameSys.imgLoader = new ImgLoader(GameSys.imagesToLoad, startGame);
            GameSys.gameObjects = [];

            function loadImages() {
                GameSys.imgLoader.load("img/mario.png", "mario");
                GameSys.imgLoader.load("img/brick.png", "brick");
            }//loadImages

            function initGameSys() {
                // create a new stage and point it at our canvas:
                GameSys.stage = new createjs.Stage(canvas);

                loadImages();
            }//initGameSys

            function init() {
                var mario = new Mario(0, 600, 16, 16, 8, 8, 2, 2);
                var brick = new Brick(300, 300, 374, 374, 187, 187, 0.2, 0.2, "brick");
                GameSys.gameObjects.push(mario);
                GameSys.gameObjects.push(brick);

                //find canvas and load images, wait for last image to load
                canvas = document.getElementById("testCanvas");
                SetFullScreen(canvas);

                // grab canvas width and height for later calculations:
                screen_width = canvas.width;
                screen_height = canvas.height;

                initGameSys();
            }//init

            function loadAnimations() {
                for (var i = 0; i < GameSys.gameObjects.length; i++)
                    GameSys.gameObjects[i].loadAnimations();
            }//loadAnimations

            function startGame() {
                loadAnimations();

                for (var i = 0; i < GameSys.gameObjects.length; i++)
                    GameSys.stage.addChild(GameSys.gameObjects[i].animation);

                // we want to do some work before we update the canvas,
                // otherwise we could use Ticker.addListener(stage);
                createjs.Ticker.addListener(GameSys);
                createjs.Ticker.useRAF = true;
                // Best Framerate targeted (60 FPS)
                createjs.Ticker.setFPS(GameSys.fps);
            }//startGame


            GameSys.tick = function() {
                for (var i = 0; i < GameSys.gameObjects.length; i++)
                    GameSys.gameObjects[i].tick();

                GameSys.stage.update();
            };
            //tick

            $(document).ready(init);

		</script>
	</head>

	<body id="body">

		<canvas id="testCanvas" width="800" height="700" style="background-color:#607559">
			Your browser doesn't support canvas. Please download IE9+ on <a href="http://ie.microsoft.com/testdrive">IE Test Drive</a>
		</canvas>

	</body>
</html>
